<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>始终飞向鼠标的纸飞机</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/80.css">
</head>

<body>
    <div id="plane">
        <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </div>
    <script>
        let plane=document.getElementById('plane');
        let deg=0,ex=0,ey=0,vx=0,vy=0,count=0;
        window.addEventListener('mousemove',(e)=>{
            ex=e.x-plane.offsetLeft-plane.clientWidth/2;
            ey=e.y-plane.offsetTop-plane.clientHeight/2;
            deg=360*Math.atan(ey/ex)/(2*Math.PI)+45;
            if(ex<0){
                deg+=180;
            }
            count=0;
        })
        function draw(){
            plane.style.transform='rotate('+deg+'deg)';
            if(count<100){
                vx+=ex/100;
                vy+=ey/100;
            }
            plane.style.left=vx+'px';
            plane.style.top=vy+'px';
            count++;
        }
        setInterval(draw, 1);
    </script>
</body>

</html>